<template>
<view class="body">
    <view class="date" @tap="toggleCalendar">
        <view>{{date}}</view>
        <image src="/static/images/sys/xia.png" v-if="!show" class="arrow-icon"></image>
        <image src="/static/images/sys/shang.png" v-if="show" class="arrow-icon"></image>
    </view>
    <calendar v-if="show" @afterCalendarRender="afterCalendarRender" :calendarConfig="calendarConfig" @changeHeader="changeHeader" @clickDate="clickDate"></calendar>
    <view class="list">
        <view v-for="(item, index) in browList" :key="index" class="list-item">
            <view class="all-time">{{item.month + '月' + item.day + '日'}}</view>
            <view class="content">
                <navigator v-for="(info, index2) in item.date" :key="index2" :url="'/pages/article/detail/detail?type=' + info.type + '&id=' + info.id" class="content-item" @longpress="delete" :data-id="info.id">
                    <view class="left">
                        <view class="title">{{info.title}}</view>
                        <view class="time">{{info.date}}</view>
                    </view>
                    <image src="/static/images/back.png" class="back-icon"></image>
                </navigator>
            </view>
        </view>
    </view>
</view>
</template>

<script>
let util = require("../../../utils/util.js");
const app = getApp();
let footList;
let date;
import calendar from "../../../component/wx_calendar/calendar/index";

export default {
  data() {
    return {
      date: util.formatTime(new Date()).split(" ")[0],
      calendarConfig: {
        defaultDay: false,
        highlightToday: true,
        inverse: true,
        onlyShowCurrentMonth: true
      },
      show: false,
      browList: [],
      footList: ""
    };
  },

  components: {
    calendar
  },
  props: {},

  onLoad() {
    this.refreshPage3389();
  },

  methods: {
    afterCalendarRender() {
      let days = [];

      if (footList) {
        this.setData({
          footList
        });
        footList.forEach(item => {
          if (days.some(time => time.year == item.year && time.month == item.month && time.day == item.day)) return;else days.push({
            year: item.year,
            month: item.month,
            day: item.day
          });
        });
        this.calendar.setTodoLabels({
          pos: "top",
          dotColor: '#ff6600',
          circle: false,
          showLabelAlways: true,
          days
        });
      }
    },

    clickDate(e) {
      let selectDay = this.calendar.getSelectedDay()[0];
      this.setData({
        browList: date.filter(item => selectDay.year == item.year && selectDay.month == item.month && selectDay.day == item.day),
        show: false,
        date: [selectDay.year, selectDay.month, selectDay.day].join("-")
      });
    },

    delete(e) {
      let id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '温馨提示',
        content: '是否确认删除此条浏览记录',
        showCancel: true,
        cancelText: '我再想想',
        cancelColor: '#000000',
        confirmText: '确定删除',
        confirmColor: '#3CC51F',
        success: result => {
          if (result.confirm) {
            let footList = uni.getStorageSync("footList");
            let delIndex = footList.findIndex(item => item.id == id);

            if (delIndex >= 0) {
              footList.splice(delIndex, 1);
              uni.setStorageSync("footList", footList);
              this.refreshPage3389({});
            }
          }
        },
        fail: () => {},
        complete: () => {}
      });
    },

    toggleCalendar() {
      this.setData({
        show: !this.show
      });
    },

    refreshPage3389() {
      footList = uni.getStorageSync("footList");
      date = [];

      if (footList) {
        footList.forEach(item => {
          if (date.some(data => data.year == item.year && data.month == item.month && data.day == item.day)) return;else date.push({
            year: item.year,
            month: item.month,
            day: item.day,
            date: []
          });
        });
        date.forEach(memory => {
          memory.date = footList.filter(item => item.year == memory.year && item.month == memory.month && item.day == memory.day);
        });
        this.setData({
          browList: date
        });
      }
    },

    changeHeader() {
      console.log("占位：函数 changeHeader 未声明");
    }

  }
};
</script>
<style>
.wrap {
    background-color: #f5f5f5;
    height: 100vh;
}

.content {
    padding-top: 0.2rem;
}

.smt-card-area {
    margin-top: 25.36rpx;
    background-color: #fff;
}

.card-panel {
    margin-top: 72.46rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area {
    display: flex;
    margin: 90.58rpx 0 0;
    padding: 28.382rpx 30.797rpx;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    align-items: center;
    justify-content: space-between;
}

.comp-wrap {
    background-color: #fff;
    margin-top: 25.362rpx;
    padding: 27.174rpx 0;
}

.arrow-icon {
    width: 50rpx;
    height: 50rpx;
}

.date {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DADADA;
    padding: 10rpx 0;
    font-size: 26rpx;
}

.all-time {
    padding: 10rpx 0;
    font-size: 28rpx;
    background-color: #F9F9F9;
}

.content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx;
    border-bottom: 2rpx solid #F3F3F3;
}

.back-icon {
    width: 20rpx;
    height: 35rpx;
    margin-left: 25rpx;
}

.time {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #949494;
}
</style>